<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Material button</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	body {
		text-align: center;
	}
	button {
		width: 120px;
		height: 32px;
		border: 1px solid rgba(0, 0, 0, .05);
		box-sizing: border-box;
		margin: 100px auto;

		background: #ddd;
		background: -moz-radial-gradient(center, ellipse cover, #fff 0%, #ddd 100%);
		background: -webkit-grandient(radial, center center, 0px, center center, 100%, color-stop(0%, #fff), color-stop(100%, #ddd)); /* chrome,safari4+ */
		background: -webkit-radius-gradient(center, ellipse cover, #fff 0%, #ddd 100%); /* chrome10+, safari5+ */
		background: -ms-radial-gradient(center, ellipse cover, #fff 0%, #ddd 100%); /* IE10+ */
		background: #ddd radial-gradient(ellipse at center, #fff 0%, #ddd 100%);
		background-size: 240px 240px;
		background-position: 0 0px;
	}

	</style>
</head>
<body>
	<button id="btn">Click Button</button>
	<script>

	var btn = document.getElementById('btn');

	btn.addEventListener('mousemove', function(e){
		this.style.backgroundPosition = (1 - (e.pageX - this.offsetLeft)/this.clientWidth)*100 +'% '+ (1- (e.pageY - this.offsetTop)/this.clientHeight)*100 + '%'
	})
	</script>
</body>
</html>